<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Jitsi Room</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
    <script src="libs/jquery-2.1.1.min.js"></script>
    <script src="libs/lib-jitsi-meet.min.js"></script>
	<script src="xmppvideoroom.json" ></script>
	<link rel="icon" type="image/ico" href="jitsi.ico" />
</head>
<body>
	XMPP Url:<input id="xmppServer" type="text" size="50" /> 
	Room id:<input id="xmppRoom" type="text" />
	<a href="#" onclick="load()">Load</a>
	<a href="#" onclick="unload()">Unload</a>
	<br/>
</body>
<script>
	// set default value
	document.querySelector('#xmppServer').value  = xmppRoomConfig.url;
	document.querySelector('#xmppRoom').value = xmppRoomConfig.roomId;

	let connection = null;
	let remoteTracks = {};

	function onRemoteAddTrack(track) {
		console.log(`onRemoteAddTrack track ${track}`);
		if (!track.isLocal()) {
			const participant = track.getParticipantId();		
			remoteTracks[participant].push(track);
			if (track.getType() === 'video') {
				$('body').append(`<div title='${participant}' onclick="kick('${participant}')"><video autoplay='1' id='${participant}'" /></div>`);
			} else {
				$('body').append(`<audio autoplay='1' id='${participant}' />`);
			}
			track.attach($(`#${participant}`)[0]);
		}
	}

	function onRemoteRemoveTrack(track) {
		console.log(`onRemoteRemoveTrack track ${track}`);
		if (!track.isLocal()) {
			const participant = track.getParticipantId();
			const tracks = remoteTracks[participant];
			if (tracks) {
				for (let i = 0; i < tracks.length; i++) {
					tracks[i].detach($(`#${participant}`)[0]);
					$(`#${participant}`).remove();
					tracks[i].dispose();
				}
				delete remoteTracks[participant];
			}
		}
	}

	function onUserLeft(id) {
		console.log('user left id:' + id);
	}

	function onUserJoined(id) {
		console.log('user joined id:' + id);
		remoteTracks[id] = [];
		remoteTracks[id].length = 0;	
	}

	function onConnectionSuccess() {
		connection.room = connection.initJitsiConference(connection.roomName, {});
		
		connection.room.on(JitsiMeetJS.events.conference.USER_JOINED, onUserJoined);
		connection.room.on(JitsiMeetJS.events.conference.USER_LEFT, onUserLeft);
		
		connection.room.on(JitsiMeetJS.events.conference.TRACK_ADDED, onRemoteAddTrack);
		connection.room.on(JitsiMeetJS.events.conference.TRACK_REMOVED, onRemoteRemoveTrack);

		connection.room.join();
	}

	function onConnectionFailed() {
		console.error('Connection Failed!');
	}

	function disconnect() {
		console.log('disconnect!');
		if (connection) {
			connection.removeEventListener(JitsiMeetJS.events.connection.CONNECTION_ESTABLISHED, onConnectionSuccess);
			connection.removeEventListener(JitsiMeetJS.events.connection.CONNECTION_FAILED, onConnectionFailed);
			connection.removeEventListener(JitsiMeetJS.events.connection.CONNECTION_DISCONNECTED, disconnect);
		}
	}

	function kick(paticipant) {
		if (connection && connection.room) {
			console.log("kick:" + paticipant)
			connection.room.kickParticipant(paticipant);
		}    
	}

	function join(serverUrl, roomName) {
		JitsiMeetJS.setLogLevel(JitsiMeetJS.logLevels.INFO);
		JitsiMeetJS.init({});

		const options = {
			hosts: {
				domain: serverUrl,
				muc: 'conference.' + serverUrl 
			},
			bosh: 'https://' + serverUrl + '/http-bind?room='+roomName
		};

		var connection = new JitsiMeetJS.JitsiConnection(null, null, options);
		connection.roomName = roomName;

		connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_ESTABLISHED, onConnectionSuccess);
		connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_FAILED, onConnectionFailed);
		connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_DISCONNECTED, disconnect);

		connection.connect();
		
		return connection;
	}

	function load() {
		var serverName = document.querySelector('#xmppServer').value;
		var roomName = document.querySelector('#xmppRoom').value;
		connection = join(serverName, roomName);
	}

	function unload() {
		if (connection) {
			if (connection.room) {
				connection.room.leave();
				connection.room = null;
			}
			connection.disconnect();
			connection = null;
		}
	}
	
	$(window).bind('load', load);
	$(window).bind('beforeunload', unload);

</script>
</html>
